<template>
    <div class="pagination">
        <el-pagination
            :page-size="props.modelValue.size"
            :current-page="props.modelValue.current"
            :page-sizes="props.sizes"
            background
            :total="Number(props.total)"
            layout="total, slot,prev, pager, next, sizes"
            @size-change="sizeChange"
            @current-change="currentChange"
        >
            <template #default>
                <el-link :icon="Refresh" :underline="false" title="刷新" @click="reload" />
            </template>
        </el-pagination>
    </div>
</template>
<script setup lang="ts">
import { Refresh } from '@element-plus/icons-vue'
import { defaultConfig, Page } from './index'
const emits = defineEmits(['reload', 'update:modelValue', 'handleSizeChange', 'handleCurrentChange'])
const props = defineProps({
    //是否立马请求数据
    loadInit: Boolean,
    modelValue: {
        type: Object as () => Page,
        required: false,
        default(): Page {
            return {
                current: defaultConfig.current,
                size: defaultConfig.size,
            }
        },
    },
    sizes: {
        type: Array as () => Array<number>,
        default: defaultConfig.sizes,
    },
    total: {
        type: [String, Number],
        default: 0,
    },
})

const sizeChange = (size: number) => {
    emits('handleSizeChange', size)
}
const currentChange = (current: number) => {
    emits('handleCurrentChange', current)
}
const reload = () => {
    emits('reload')
}

//直接重置初始数据
onMounted(() => {
    if (props.loadInit) {
        reload()
    }
})
</script>

<style lang="scss" scoped>
.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

:deep(.el-pagination) {
    padding: 0;
    position: relative;
}
</style>
